<template>
  <div>
    <MesBox
      v-model="modelFlag"
      :lazy="true"
      :title="boxTitle"
      :height="600"
      :width="1400"
      :padding="15"
      :onModelClose="onModelClose"
    >
      <MesForm :formFields="formFields" :formRules="formRules"></MesForm>
      <MesHeader :text="boxText" icon="s-grid">
        <template #default>
          <div style="text-align: right; padding-top: 4px">
            <el-button size="small" link class="textColor" @click="addRow"
              ><i class="el-icon-plus" style="margin-right: 5px"></i
              >添加行</el-button
            >
            <el-button size="small" link class="textColor" @click="delRow"
              ><i class="el-icon-delete" style="margin-right: 5px"></i
              >删除行</el-button
            >
            <el-button size="small" link class="textColor" @click="importTable"
              ><i class="el-icon-upload2" style="margin-right: 5px"></i
              >导入</el-button
            >
            <el-button
              size="small"
              link
              class="textColor"
              @click="exportTable"
              v-if="curAction != 'add'"
              ><i class="el-icon-download" style="margin-right: 5px"></i
              >导出</el-button
            >
            <el-button
              size="small"
              link
              class="textColor"
              @click="refresh"
              v-if="curAction != 'add'"
              ><i class="el-icon-refresh" style="margin-right: 5px"></i
              >刷新</el-button
            >
          </div>
        </template>
      </MesHeader>

      <MesTable
        :height="380"
        :columns="columns"
        :tableData="tableData"
        ref="detailTable"
        :index="true"
        :pagination-hide="true"
        :defaultLoadPage="true"
        :url="url"
        :loadKey="true"
        :clickEdit="true"
      ></MesTable>

      <!-- 弹出框底部按钮 -->
      <template #footer>
        <div>
          <el-button type="danger" :icon="Check" @click="save">保存</el-button>
          <el-button type="primary" :icon="Close" @click="closeModal"
            >关闭</el-button
          >
        </div>
      </template>
    </MesBox>
  </div>
</template>

<script setup>
import { ref, defineExpose, reactive, getCurrentInstance } from 'vue'
import MesBox from '@/components/basic/MesBox.vue'
import MesForm from '@/components/basic/MesForm.vue'
import MesHeader from '@/components/basic/MesHeader.vue'
import MesTable from '@/components/basic/MesTable.vue'
import { Check, Close } from '@element-plus/icons-vue'

let modelFlag = ref(false)
let formFields = reactive({})
let formRules = reactive([])
let columns = reactive([])
let tableData = reactive([])
let boxTitle = ref('')
let boxText = ref('')
let detailTable = ref(null)
let refreshRows = ref(null)
let url = ref('')
let curAction = ref('')
let { $message } = getCurrentInstance().appContext.config.globalProperties

//开启弹窗
const openModal = ({
  title,
  text,
  sendFormFields,
  sendFormRules,
  chilrenColumns,
  childrenData,
  currentAction,
}) => {
  curAction.value = currentAction
  Object.assign(formFields, sendFormFields)

  boxTitle.value = title
  boxText.value = text

  if (sendFormRules && !formRules.length) {
    sendFormRules.forEach((item) => {
      formRules.push(item)
    })
  }

  if (chilrenColumns && !columns.length) {
    chilrenColumns.forEach((item) => {
      columns.push(item)
    })
  }

  if (childrenData && !tableData.length) {
    childrenData.forEach((item) => {
      tableData.push(item)
    })
  }

  modelFlag.value = true
}

//关闭按钮
const closeModal = () => {
  // 新建置空父级的默认值
  Object.keys(formFields).forEach((item) => {
    formFields[item] = ''
  })

  //清空table数据
  tableData.length = 0

  modelFlag.value = false
}

//弹出框右上角X
const onModelClose = () => {
  closeModal()
}

//保存
const save = () => {
  $message.info('保存成功')
  console.log(tableData)
  console.log(formFields)
  console.log(detailTable.value)
}

//添加行
const addRow = () => {
  detailTable.value.tableData.push({
    // CProductCode: '',
    // CProductName: '',
    // CProductStandard: '',
    // CUnit_Id: '',
    // QuantityPer: null,
  })
  $message.info('添加行')
}

//删除行
const delRow = () => {
  detailTable.value.delRow()
}

//导入
const importTable = () => {
  // this.upload.url = `${this.http.ipAddress}api/${this.detail.table}/${this.const.IMPORT}?table=1`
  // this.upload.template.url = `${this.http.ipAddress}api/${this.detail.table}/${this.const.DOWNLOADTEMPLATE}`
  // //定义下载模板的文件名
  // this.upload.template.fileName = this.detail.cnName
  // this.upload.excel = true
  $message.info('导入')
}

//导出
const exportTable = () => {}

//刷新
const refresh = () => {
  $message.info('刷新')
  detailTable.value.load()
}

defineExpose({ openModal })
</script>

<style lang="less" scoped>
.textColor {
  color: #000000ab;
}
</style>
